<style scoped>
    .box{
        padding:0px 30px;
    }
    .search-h3{
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}

.footer{
    padding-top:20px;
    padding-bottom:20px;
}
#footer{
    padding-left:30px ;
    padding-right:30px ;
}
.footer_1{
    bottom:0;
    background-color: black;
    text-align: left !important;
}
/* .footerWidth{
    width:1437px;

} */
.cailiao{
    margin: 10px 0px 15px ;
}
    .cailiao span:first-child{
        display: inline-block;
        width: 20%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        border: 1px solid #A9A9A9;
        border-right: 0;
        text-align: center;
        vertical-align: middle;
        background-color: #FAFAFA;
        font-weight: 500;
    }
.cailiao .inputBox{
    height: 36px;
    line-height: 34px;                              
    width: 80%;
    vertical-align: middle;
    padding-left: 5px;
    border:1px solid #A9A9A9;
    display: inline-block;
}
.cailiao .inputBox input{
    border: 0;
    width: 100%;
    outline: none;
    color: #495060;
}
</style>
<style>
.ivu-table td.blue{
      color: #6790E7;
}

</style>



<template>
    <div>
        <product-title></product-title>
        <div class="box">
            <Row>
                <Col :md="21" :lg="21">
                    <h3 class="search-h3">{{this.$route.params.name}}</h3>
                </Col>
                <Col :md="3" :lg="3" class="textR">
                    <Button type="success" @click="createModal">
                        <Icon type="plus"></Icon>
                        新增
                    </Button>
                </Col>
            </Row>
            <Row>
                <Col>
                <div class="highlight_table">
                    <Table :columns="column" :data="data1" highlight-row @on-current-change="highlightChange" border stripe size="large" :loading="tableLoading" class="table1"></Table>
                </div>
                </Col>
            </Row>
            <div id="footer" class="footer_1 pt22">
            <Row>
                <i-col :md="24" :lg="16">
                    <!-- <Button type="error" style="border-radius:2px;margin-right:10px;"  :disabled="buttonDisabled" @click="remove">删除</Button> -->
                    <Button type="primary" style="border-radius:2px;"  :disabled="buttonDisabled" @click="updateModal">编辑</Button>
                </i-col>
                <Col :md="24" :lg="8" class="tRight">
                    <Page ref="pages"  :total="total" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                </Col>
            </Row>
                
        </div>
        </div>
        
        <Modal
            v-model="create_modal"
            title="新增常见问题"
            ok-text="保存设置"
            @on-ok="create"
            :mask-closable="false"
            :width="500"
            cancel-text=""
            :loading="createLoading"
        >
            <div class="pro">
                <div class="pro_show">
                    <Row style="padding:0px 5px;">
                        <Col span="24">
                        <div >
                            <div class="cailiao">
                                <span>标题名称</span><span class="inputBox"><input placeholder="请输入标题名称" v-model="createForm.title"></span>
                            </div>
                            <div class="cailiao">
                                <i-input type="textarea" :rows="4" v-model="createForm.content" placeholder="请输入标题内容"></i-input>
                            </div>
                        </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </Modal>
        <Modal
            v-model="update_modal"
            title="修改常见问题"
            ok-text="保存设置"
            @on-ok="update"
            :mask-closable="false"
            :width="500"
            cancel-text=""
            :loading="updateLoading"
        >
            <div class="pro">
                <div class="pro_show">
                    <Row style="padding:0px 5px;">
                        <Col span="24">
                        <div >
                            <div class="cailiao">
                                <span>标题名称</span><span class="inputBox"><input placeholder="请输入标题名称" v-model="updateForm.title"></span>
                            </div>
                            <div class="cailiao">
                                <i-input type="textarea" :rows="4" v-model="updateForm.content"></i-input>
                            </div>
                        </div>
                        </Col>
                    </Row>
                </div>
            </div>
        </Modal>
    </div>
</template>



<script>
import productTitle from '../../components/productTitle'
import {_question_list,_question_delete,_question_create,_question_info,_question_update} from '../../api/product_v2'
    export default {
        data() {
            return {
                create_modal:false,
                update_modal:false,
                tableLoading:false,
                updateLoading:true,
                createLoading:true,
                footerWidth:{
                    'width':''
                },
                column:[
                    {
                        title:'问题名称',
                        key:'title',
                        className:'blue',
                    },
                    {
                        title:'问题内容',
                        key:'content'
                    }
                ],
                data1:[
                ],
                createForm:{
                    title:'',
                    content:''
                },
                updateForm:{
                    title:'',
                    content:''
                },
                currentRow:{
                    id:''
                },
                buttonDisabled:true,
                pagesize:10,
                total:0,
                p:1
                
            }
        },
        components:{
            productTitle
        },
        created(){
        },
        mounted(){
            this.get_list();
        },
        methods:{
            highlightChange(currentRow,oldCurrentRow){
                this.currentRow  = currentRow;
                this.buttonDisabled = false;
            },
            createModal(){
                this.create_modal=true;
            },
            updateModal(){
                this.update_modal=true;
                this.get_detail();
            },
            get_list(){
                let params={
                    mid :this.$route.params.id,
                    p:this.p,
                }
                new Promise((rev,rej)=>{
                    _question_list(params).then(res=>{
                        if(res.data.err==0){
                            this.data1 =res.data.data.list;
                        }else{
                            this.$Message.error(res.data.info);
                        }
                        rev();
                    }).catch(error=>{
                        rej(error)
                    })
                })
            },
            create(){
                this.createForm.mid = this.$route.params.id;
                if(!this.createForm.title){
                    this.$Message.error('名字不能为空');
                    let _this=this;
                    setTimeout(function(){
                        _this.createLoading=false;
                        _this.$nextTick(function(){
                            _this.createLoading=true;
                        })
                    },1000)
                }else if(!this.createForm.content){
                    this.$Message.error('内容不能为空！');
                    let _this=this;
                    setTimeout(function(){
                        _this.createLoading=false;
                        _this.$nextTick(function(){
                            _this.createLoading=true;
                        })
                    },1000)
                }else if(this.createForm.title&&this.createForm.content){
                    new Promise((rev,rej)=>{
                        _question_create(this.createForm).then(res=>{
                            if(res.data.err==0){
                                this.createForm.title='';
                                this.createForm.content='';
                                this.create_modal=false;
                                this.get_list();
                            }else{
                                this.$Message.error(res.data.info);
                                let _this=this;
                                setTimeout(function(){
                                    _this.updateLoading=false;
                                    _this.$nextTick(function(){
                                        _this.updateLoading=true;
                                    })
                                },1000)
                            }
                            rev();
                        }).catch(error=>{
                            rej(error);
                            let _this=this;
                            setTimeout(function(){
                                _this.createLoading=false;
                                _this.$nextTick(function(){
                                    _this.createLoading=true;
                                })
                            },1000)
                        })
                    })

                }
            },
            get_detail(){
                let params={
                    question_id:this.currentRow.id
                }

                new Promise((rev,rej)=>{
                    _question_info(params).then(res=>{
                        if(res.data.err==0){

                            this.updateForm=res.data.data;
                        }else{
                            this.$Message.error(res.data.info);
                        }
                        rev();
                    }).catch(error=>{
                        rej(error)
                    })
                })
            },
            update(){
                this.updateForm.mid = this.$route.params.id;
                if(!this.updateForm.title){
                    this.$Message.error('名字不能为空！');
                    let _this=this;
                    setTimeout(function(){
                        _this.updateLoading=false;
                        _this.$nextTick(function(){
                            _this.updateLoading=true;
                        })
                    },1000)
                }else if(!this.updateForm.content){
                    this.$Message.error('内容不能为空！');
                    let _this=this;
                    setTimeout(function(){
                        _this.updateLoading=false;
                        _this.$nextTick(function(){
                            _this.updateLoading=true;
                        })
                    },1000)
                }else if(this.updateForm.title&&this.updateForm.content){
                    this.updateForm.question_id =this.updateForm.mid;
                    this.updateForm.id =undefined;
                    new Promise((rev,rej)=>{
                        _question_update(this.updateForm).then(res=>{
                            if(res.data.err==0){
                                this.updateForm.title='';
                                this.updateForm.content='';
                                this.get_list();
                            }else{
                                this.$Message.error(res.data.info);
                                let _this=this;
                                setTimeout(function(){
                                    _this.updateLoading=false;
                                    _this.$nextTick(function(){
                                        _this.updateLoading=true;
                                    })
                                },1000)
                            }
                            rev();
                        }).catch(error=>{
                            rej(error);
                            let _this=this;
                            setTimeout(function(){
                                _this.updateLoading=false;
                                _this.$nextTick(function(){
                                    _this.updateLoading=true;
                                })
                            },1000)
                        })
                    })

                }
            },
            remove(){
                let params={
                    question_id:this.currentRow.id
                }
                new Promise((rev,rej)=> {
                    _question_delete(params).then(res => {
                        if (res.data.err == 0) {
                            this.$Message.success('操作成功');
                            this.get_list();
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        rev();
                    }).catch(error=>{
                        rej(error);
                    })
                })
            },
            pageSizeChange(value) {
                this.pagesize = value;
                this.get_list();
            },
            pageChange(value) {
                this.p = value;
                let _query = Object.assign({},this.searchForm,{p:value,pagesize: this.pagesize})
                this.get_list();
            },
        }
    }
</script>